<!DOCTYPE html>
<html>
<head>
    <title>Electron Motion in E and B Fields</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw a filled arrow head
        function drawArrow(x, y, angle) {
            const size = 12;
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2.5);
            ctx.lineTo(-size, size / 2.5);
            ctx.closePath();
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.restore();
        }

        // --- Main Drawing ---
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // --- Region Labels ---
        ctx.fillStyle = 'black';
        ctx.font = 'bold 24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('Region I', 200, 170);
        ctx.fillText('Region II', 460, 60);

        // --- Region I ---
        const region1_y_top = 200;
        const region1_y_bottom = 300;
        const boundary_x = 350;

        // Bounding lines for Region I
        ctx.beginPath();
        ctx.moveTo(50, region1_y_top);
        ctx.lineTo(boundary_x, region1_y_top);
        ctx.moveTo(50, region1_y_bottom);
        ctx.lineTo(boundary_x, region1_y_bottom);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 'x' marks for the field in Region I
        ctx.font = 'bold 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        for (let i = 0; i < 2; i++) {
            const y = region1_y_top + 40 + i * 80;
            for (let j = 0; j < 8; j++) {
                const x = 90 + j * 30;
                ctx.fillText('x', x, y);
            }
        }
        
        // "E x" Label
        ctx.font = 'bold 24px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('E x', 90, 360);
        
        // --- Region II ---
        // Bounding box for Region II
        ctx.beginPath();
        ctx.rect(boundary_x, 70, 150, 230);
        ctx.stroke();

        // --- Trajectory ---
        ctx.lineWidth = 2;
        ctx.setLineDash([8, 6]);
        
        // Straight path in Region I
        ctx.beginPath();
        ctx.moveTo(80, 250);
        ctx.lineTo(boundary_x, 250);
        
        // Curved path in Region II using a Bezier curve to match the shape
        const p0 = { x: 350, y: 250 }; // start
        const p1 = { x: 420, y: 250 }; // control point 1
        const p2 = { x: 370, y: 120 }; // control point 2
        const p3 = { x: 430, y: 120 }; // end
        ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
        ctx.stroke();
        
        // Reset line dash for arrows
        ctx.setLineDash([]);
        
        // --- Arrows on Trajectory ---
        // Arrows on straight path
        drawArrow(160, 250, 0);
        drawArrow(280, 250, 0);

        // Arrows on curved path (positions and angles approximated from image)
        drawArrow(375, 245, -Math.PI / 10); // Start of curve, up-right
        drawArrow(428, 175, -Math.PI * 3 / 5); // Middle of curve, up-left
        drawArrow(428, 128, -Math.PI * 5 / 6); // End of curve, left-up

        // A stray dot from the original image
        ctx.beginPath();
        ctx.arc(400, 160, 1.5, 0, 2 * Math.PI);
        ctx.fill();

    </script>
</body>
</html>